/*
 * @Author: YuanSong
 * @Date: 2021-12-01 11:16:29
 * @Last Modified by: YuanSong
 * @Last Modified time: 2021-12-03 15:54:21
 */
import React from "react";
import { withRouter, RouteComponentProps } from "react-router-dom";

import { IGlobalReduceState } from "@/redux/reducers/global";
import { requestLogOut } from "@redux/actions/user";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { AppState } from "@/redux/reducers";
import hidepassword from "@/assets/icons/hidepassword.svg";
import {RightNavConfig} from "@typings/normalPage"

type IProps = IGlobalReduceState &
  RouteComponentProps & {
    RightNavConfig:RightNavConfig
    handleNavItemClick:(T:number)=>void;
  };
class Navigation extends React.Component<IProps> {
  constructor(props: any) {
    super(props);
    this.handleNavItemClick= this.handleNavItemClick.bind(this);
  }

  readonly state = {
    /** 搜索字符 */
    searchStr: "",
  };
  public componentDidMount() {
    console.log("Navbar componentDidMount");
  }
  handleNavItemClick(index:number){
      this.props.handleNavItemClick(index)
  }

  render() {
    const RightNavConfig = this.props.RightNavConfig;
    const listItem = RightNavConfig.navItemArr.map((item:any,index:number) => (
        <li onClick={()=>this.handleNavItemClick(index)} key={index+item.svgSrc} className={[RightNavConfig.chose == index?'active':''].join(' ')} style={{marginTop:item.marginTop?item.marginTop:'0px'}}>
            <img src={require(`@/assets/icons/${item.svgSrc}.svg`).default} className="SVG-navigation"  alt="hidepassword" />
            <span>{item.title}</span>    
        </li>
      ))
    return (
      <div className="Navigation-Wrapper">
        <ul>
          {listItem}
        </ul>
      </div>
    );
  }
}

export default connect(
  (state: AppState) => state.global,
  (dispatch) =>
    bindActionCreators(
      {
        requestLogOut,
      },
      dispatch
    )
)(withRouter(Navigation));
